<!-- StudyPlanCategory.html -->
<!DOCTYPE html>
<html id="category_html">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>课程分类列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			html,body{
				background-color: rgba(0,0,0,0);
			}
			.mui-table-view-cell{
				padding: 6px 10px;
			}
			.mui-table-view-cell{
				background-color: rgba(0,0,0,0.5);
				color: white;
			}
			.selected-cell{
				color: #18b4ed;
			}
			.mui-table-view-cell:after{
				background-color: white;
			}
		</style>
	</head>
	<body>
    	<ul id="category_list" class="mui-table-view">
    		<li id="0" class="mui-table-view-cell base_content_font base_dark_grey">
    			全部
	    	</li>
	    	<li id="1" class="mui-table-view-cell base_content_font base_dark_grey selected-cell">
    			我的课程
	    	</li>
	    	<li id="2" class="mui-table-view-cell base_content_font base_dark_grey">
    			其他课程
	    	</li>
	    	<li id="3" class="mui-table-view-cell base_content_font base_dark_grey">
    			公共课程
	    	</li>
	    	<li id="4" class="mui-table-view-cell base_content_font base_dark_grey">
    			推送课程
	    	</li>
    	</ul>
	</body>
	<!-- <script type="text/javascript" src="../../script/mui.min.js"></script> -->
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var currentCategoryId = '';
		apiready = function(){
			setupBgClick();
		    setupCellClick();
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'searchPlanCourseNotifi'
			}, function(ret, err) {
			    $('.mui-table-view-cell').removeClass('selected-cell');
			    $('#0').addClass('selected-cell');
			});
		}
		function setupBgClick(){
			$('#category_html').click(function(){
				api.setFrameAttr({
				    name: 'StudyPlanCategory',
				    hidden: true
				});
			});
		}
		function setupCellClick(){
			$('.mui-table-view-cell').unbind('click');
			$('.mui-table-view-cell').click(function(event){
				event.stopPropagation();
				var currentCategoryId = $(this).attr('id');
				var currentCategoryTitle = $(this).text();
				$('.mui-table-view-cell').removeClass('selected-cell');
				$('#'+currentCategoryId).addClass('selected-cell');
				api.sendEvent({
				    name: 'planCourseCategoryNotifi',
				    extra: {
				        currentCategoryId: currentCategoryId, 
				        currentCategoryTitle: currentCategoryTitle
				    }
				});
				api.setFrameAttr({
				    name: 'StudyPlanCategory',
				    hidden: true
				});
			});
		}
	</script>
</html>